import React, { memo, useState, useCallback, useEffect } from 'react'
import VideoItem from 'components/VideoItem/VideoItem'
import { getRankingArchive } from 'api/base'
import { dealVideo } from '@/redux/async'
const NewestVideo = memo(function NewestVideo(props) {
    const { id, getPicUrl } = props
    const [currentPage, setCurrentPage] = useState(0)
    const [video, setVideo] = useState([])
    const [loading, setLoading] = useState(false)
    const loadMore = useCallback(() => {
        const page = currentPage + 1
        if (page <= 4) {
            setCurrentPage(page)
            setLoading(true)
        }
    })
    useEffect(() => {
        getRankingArchive({ tId: id, p: currentPage }).then((res) => {
            let ret = dealVideo(res.data.archives)

            setVideo((video) => video.concat(ret))
            setLoading(false)
        })
    }, [currentPage, id])
    return (
        <div className="new">
            <div className="title item">最新视频</div>
            <div className="flex middle wrap">
                {video.map((item, i) => {
                    if (item.pic && item.pic.indexOf('@320w_200h') === -1) {
                        item.pic = getPicUrl(item.pic, '@320w_200h')
                    }
                    return <VideoItem video={item} key={i} showStatistics={true} />
                })}
            </div>
            <VideoLoad loadMore={loadMore} currentPage={currentPage} loading={loading} />
        </div>
    )
})
const VideoLoad = memo(function VideoLoad(props) {
    const { currentPage, loading, loadMore } = props
    let dom = ''
    const handleClick = useCallback(() => {
        loadMore()
    })
    if (currentPage < 4) {
        if (loading) {
            dom = <div className="loading">加载中...</div>
        } else {
            dom = (
                <div
                    onClick={() => {
                        handleClick()
                    }}
                    className="load-more"
                >
                    点击加载更多
                </div>
            )
        }
    } else {
        dom = (
            <div className="tips">
                <img src={require('../../../assets/images/tips.png')} alt="" className="icon" />
                <div className="text">只能到这里了 ~</div>
            </div>
        )
    }
    return dom
})
export default NewestVideo
